{% extends 'ApplicationBootstrapBundle::layout.html.twig' %}

{% block title %}Sticky Footer and Fixed Top Navbar Example for Bootstrap{% endblock %}
{% block layoutstyle %}
    <link href="{{ asset('bundles/applicationbootstrap/css/examples/navbar_fixed_sticky_footer.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('bundles/applicationbootstrap/css/fonts/font-awesome/font-awesome.css') }}" rel="stylesheet" type="text/css" media="all" />
    <link href="{{ asset('bundles/applicationbootstrap/css/multilevel-menu/multilevel-menu-devoops.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('bundles/applicationbootstrap/js/multilevel-menu/multilevel-menu-devoops.js') }}" type="text/javascript"></script>
{% endblock %}

{% block navigation %}
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
        
            {% include 'ApplicationBootstrapBundle::_navbar.html.twig' %}
        
        </div>
    </nav>
{% endblock %}

{% block body %}
    <div class="container">
        <div class="page-header">
          <h1>Multilevel Menu DevOOPS</h1>
        </div>
        <div class="row">
			<div id="sidebar-left" class="col-xs-3 col-sm-3">
				<ul class="nav main-menu">
					<li>
						<a href="#" class="active ajax-link">
							<i class="fa fa-dashboard"></i>
							<span class="hidden-xs">Dashboard</span>
						</a>
					</li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle">
							<i class="fa fa-bar-chart-o"></i>
							<span class="hidden-xs">Charts</span>
						</a>
						<ul class="dropdown-menu">
							<li><a class="ajax-link" href="#">xCharts</a></li>
							<li><a class="ajax-link" href="#">Flot Charts</a></li>
							<li><a class="ajax-link" href="#">Google Charts</a></li>
							<li><a class="ajax-link" href="#">Morris Charts</a></li>
							<li><a class="ajax-link" href="#">CoinDesk realtime</a></li>
						</ul>
					</li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle">
							<i class="fa fa-table"></i>
							 <span class="hidden-xs">Tables</span>
						</a>
						<ul class="dropdown-menu">
							<li><a class="ajax-link" href="#">Simple Tables</a></li>
							<li><a class="ajax-link" href="#">Data Tables</a></li>
							<li><a class="ajax-link" href="#">Beauty Tables</a></li>
						</ul>
					</li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle">
							<i class="fa fa-pencil-square-o"></i>
							 <span class="hidden-xs">Forms</span>
						</a>
						<ul class="dropdown-menu">
							<li><a class="ajax-link" href="#">Elements</a></li>
							<li><a class="ajax-link" href="#">Layouts</a></li>
							<li><a class="ajax-link" href="#">File Uploader</a></li>
						</ul>
					</li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle">
							<i class="fa fa-desktop"></i>
							 <span class="hidden-xs">UI Elements</span>
						</a>
						<ul class="dropdown-menu">
							<li><a class="ajax-link" href="#">Grid</a></li>
							<li><a class="ajax-link" href="#">Buttons</a></li>
							<li><a class="ajax-link" href="#">Progress Bars</a></li>
							<li><a class="ajax-link" href="#">Jquery UI</a></li>
							<li><a class="ajax-link" href="#">Icons</a></li>
						</ul>
					</li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle">
							<i class="fa fa-list"></i>
							 <span class="hidden-xs">Pages</span>
						</a>
						<ul class="dropdown-menu">
							<li><a href="#">Login</a></li>
							<li><a href="#">Register</a></li>
							<li><a id="locked-screen" class="submenu" href="#">Locked Screen</a></li>
							<li><a class="ajax-link" href="#">Contacts</a></li>
							<li><a class="ajax-link" href="#">Feed</a></li>
							<li><a class="ajax-link add-full" href="#">Messages</a></li>
							<li><a class="ajax-link" href="#">Pricing</a></li>
							<li><a class="ajax-link" href="#">Invoice</a></li>
							<li><a class="ajax-link" href="#">Search Results</a></li>
							<li><a class="ajax-link" href="#">Error 404</a></li>
							<li><a href="#">Error 500</a></li>
						</ul>
					</li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle">
							<i class="fa fa-map-marker"></i>
							<span class="hidden-xs">Maps</span>
						</a>
						<ul class="dropdown-menu">
							<li><a class="ajax-link" href="#">OpenStreetMap</a></li>
							<li><a class="ajax-link" href="#">Fullscreen map</a></li>
						</ul>
					</li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle">
							<i class="fa fa-picture-o"></i>
							 <span class="hidden-xs">Gallery</span>
						</a>
						<ul class="dropdown-menu">
							<li><a class="ajax-link" href="#">Simple Gallery</a></li>
							<li><a class="ajax-link" href="#">Flickr Gallery</a></li>
						</ul>
					</li>
					<li>
						 <a class="ajax-link" href="#">
							 <i class="fa fa-font"></i>
							 <span class="hidden-xs">Typography</span>
						</a>
					</li>
					 <li>
						<a class="ajax-link" href="#">
							 <i class="fa fa-calendar"></i>
							 <span class="hidden-xs">Calendar</span>
						</a>
					 </li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle">
							<i class="fa fa-picture-o"></i>
							 <span class="hidden-xs">Multilevel menu</span>
						</a>
						<ul class="dropdown-menu">
							<li><a href="#">First level menu</a></li>
							<li><a href="#">First level menu</a></li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle">
									<i class="fa fa-plus-square"></i>
									<span class="hidden-xs">Second level menu group</span>
								</a>
								<ul class="dropdown-menu">
									<li><a href="#">Second level menu</a></li>
									<li><a href="#">Second level menu</a></li>
									<li class="dropdown">
										<a href="#" class="dropdown-toggle">
											<i class="fa fa-plus-square"></i>
											<span class="hidden-xs">Three level menu group</span>
										</a>
										<ul class="dropdown-menu">
											<li><a href="#">Three level menu</a></li>
											<li><a href="#">Three level menu</a></li>
											<li class="dropdown">
												<a href="#" class="dropdown-toggle">
													<i class="fa fa-plus-square"></i>
													<span class="hidden-xs">Four level menu group</span>
												</a>
												<ul class="dropdown-menu">
													<li><a href="#">Four level menu</a></li>
													<li><a href="#">Four level menu</a></li>
													<li class="dropdown">
														<a href="#" class="dropdown-toggle">
															<i class="fa fa-plus-square"></i>
															<span class="hidden-xs">Five level menu group</span>
														</a>
														<ul class="dropdown-menu">
															<li><a href="#">Five level menu</a></li>
															<li><a href="#">Five level menu</a></li>
															<li class="dropdown">
																<a href="#" class="dropdown-toggle">
																	<i class="fa fa-plus-square"></i>
																	<span class="hidden-xs">Six level menu group</span>
																</a>
																<ul class="dropdown-menu">
																	<li><a href="#">Six level menu</a></li>
																	<li><a href="#">Six level menu</a></li>
																</ul>
															</li>
														</ul>
													</li>
												</ul>
											</li>
											<li><a href="#">Three level menu</a></li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</li>
				</ul>
			</div>
			<div id="content" class="col-xs-9 col-sm-9">
			    content
			</div>
        </div>
    </div> <!-- /container -->
{% endblock %}